<template>
    <div>
        <div class="wrap">
            <bread-crumb></bread-crumb>
            <h1>带头像的所有学生信息</h1>
            <div>
                <el-table :data="tableData" style="width: 100%" border height="600px" @row-click="goDetail">
                    <el-table-column prop="stu_id" label="学号" width="120">
                    </el-table-column>
                    <el-table-column prop="stu_name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="stu_sex" label="性别" width="120">
                    </el-table-column>
                    <el-table-column prop="stu_jg" label="籍贯" width="160">
                    </el-table-column>
                    <el-table-column prop="stu_date" label="出生日期" width="180">
                        <template slot-scope="scope">
                            <!-- <p>{{ scope.$index }}</p> -->
                            <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stu_gbf" label="男女朋友" width="120">
                    </el-table-column>
                    <el-table-column prop="stu_hobby" label="爱好及自我评价" width="300">
                    </el-table-column>
                    <el-table-column prop="stu_head_img" label="头像">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.stu_head_img"
                                :preview-src-list="srcList" @click="bigImage(scope.row.stu_head_img)">
                            </el-image>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    :current-page="currentPage" @current-change="currentChange">
                </el-pagination>
                <el-button @click="$router.push({ name: 'allStuInfoHeaderHou' })">测试后台分页的写法</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { req_all_stu_info } from "@/api/stuInfo.js";
export default {
    async mounted() {
        let result = await req_all_stu_info();
        // 真分页  服务器一组组返回数据      当数据量大的时候都是真分页
        // 假分页  服务器当中所有信息请求回来 在前台进行分页
        console.log(result);
        // 当请求回来数据之后将数据赋值给tableData
        this.tableData = result.data;
        // 请求回来的数组的长度为分页当中的总条数
        this.total = result.data.length;
        this.totalData = result.data;

        this.tableData = this.totalData.slice(
            (this.currentPage - 1) * this.pageSize,
            this.currentPage * this.pageSize
        );
        console.log(this.$moment("2022-07-05T07:18:03.312Z").format("YY-MM-DD"));
    },
    data() {
        return {
            tableData: [],
            srcList: [
                "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            ],
            total: 0, //数据的总条数
            pageSize: 5, //5条数据一页
            totalData: 0, //请求回来的全部数据
            currentPage: 1, //当前页码
        };
    },
    methods: {
        currentChange(value) {
            this.tableData = this.totalData.slice(
                (value - 1) * this.pageSize,
                value * this.pageSize
            );
        },
        bigImage(value) {
            console.log(value);
            this.srcList[0] = value;
        },
        goDetail(row, column, event) {
            console.log(row, column, event);
            console.log(event.target.tagName);
            if (event.target.tagName != "IMG") {
                this.$router.push({
                    name: "stuDetail",
                    query: {
                        stuInfoDetail: JSON.stringify(row),
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
div {
    .wrap {
        height: 30px;
    }
}
</style>